﻿@using CleanArchitecture.Core.Helper
@using CleanArchitecture.Infrastructure.Models.Business.Blog
@using CleanArchitecture.Infrastructure.Models.SystemManage;
@model BlogItemModel
@{
    Layout = "_BackendLayout";
    ViewData["Title"] = ViewBag.PageTitle as string;
    int currentSystemModuleId = ViewBag.CurrentSystemModuleId;
    int columntreeType = (int)ViewBag.ColumnTreeType;
    var moduleAssignedBtns = ViewBag.ModuleAssignedBtns as IList<SystemDataDicButtonModel> ?? null;
    BlogItemSearchModel searchModel = Model.CustomProperties["BlogItemSearchModel"] as BlogItemSearchModel ?? null;
}
@section csslinks{ 
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@1.5.6/dist/antd.min.css" />
}
@section cssstyles {
    <style type="text/css">
        body {
            display: flex;
            flex: auto;
            flex-direction: column;
            min-height: 0;
            background: #f0f2f5;
        }
        .blogmanage {
            width: 100% !important;
            height: 100%;
            background-color: #fff;
            margin: 0 !important;
            padding: 10px 2px;
            position: absolute;
        }
        .blogmanage .layui-tree-icon {
            width: 14px;
            height: 14px;
        }
        .blogmanage .layui-tree-entry {
            height: 25px;
        }
        .article-list-item {
            border-bottom: 1px solid #e8e8e8;
            margin-top: 16px;
            padding-left: 8px;
        }
        .article-list-item > h2 {
            font-size: 18px;
            color: #333;
            margin-bottom: 12px;
        }
        .article-list-item .article-list-item-text,
        .article-list-item .article-list-item-desc {
            margin-bottom: 12px;
        }
        .article-list-item .article-list-item-tool {
            color: #666;
            margin-bottom: 5px;
        }
        .article-list-item .article-list-item-tool .article-list-item-tool-item:first-child {
            padding-left: 0;
        }
        .article-list-item .article-list-item-tool .article-list-item-tool-item:last-child {
            border-right: none;
            padding-right: 0;
        }
        .article-list-item .article-list-item-tool .article-list-item-tool-item {
            border-right: 1px solid #e8e8e8;
            padding: 0 15px;
            cursor: pointer;
        }
        span.newsinfo:first-child {
            padding-left: 0;
        }
        span.newsinfo:last-child {
            border-right: none;
            padding-right: 0;
        }
        span.newsinfo {
            border-right: 1px solid #e8e8e8;
            padding: 0 15px;
        }
        span.createtime {
            float: left;
            width: 100%;
        }
    </style>
}
<div class="blogmanage layui-main" id="blogmanage">
    <div class="layui-container layui-col-220" style="padding: 0;">
        <div class="layui-nav-custom-title">
            @ViewBag.PageTitle
        </div>
        <div class="layui-row layui-nav-custom-content">
            <a-spin :spinning="loadingmenus" :delay="delayTime">
                <a-menu mode="vertical" @@click="onSelectMenuItem">
                    <template v-for="item in menuItems">
                        <a-menu-item v-if="item.children.length == 0" :key="item.id">
                            <span>{{ item.title }}</span>
                        </a-menu-item>
                        <sub-menu v-else :key="item.id" :menu-info="item" />
                    </template>
                </a-menu>
            </a-spin>
        </div>
    </div>
    <div id="rightpanel" class="right-col-body">
        <form class="layui-form">
            <fieldset class="layui-elem-field" style="margin: 5px 10px;">
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <div class="layui-inline pagebuttongroup">
                            <div class="sidebar-collaps toolgroup" data-tips="收起侧边栏" data-type="collaps" data-side-fold="1" data-widthelement="layui-col-220" data-leftelement="right-col-body">
                                <i class="fa fa-outdent"></i>
                            </div>
                            @await Component.InvokeAsync("PageButton")
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">文章检索</label>
                            <div class="layui-input-inline">
                                <input type="text" name="blogSearch" value="" placeholder="检索范围：标题/内容/作者" autocomplete="off" class="layui-input">
                            </div>
                            <button type="button" class="layui-btn layui-btn-normal" id="searchBlogBtn">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </fieldset>
            <div class="layui-fluid" id="blogtablepanel" style="padding-left: 10px;">
                <table id="bloglisttable" lay-filter="bloglisttable"></table>
            </div>
            <div class="layui-fluid" id="searchpanel" style="padding-left: 10px;">
                <div class="layui-card" v-if="displaysearchpanel">
                    <div class="layui-card-header">
                        <p style="font-size: 18px; float: left;">
                            关键词 <span style="color: #01AAED">{{keywords}}</span> 查询到
                            <strong>{{total}}</strong> 个结果
                        </p>
                        <p style="float:right; margin-left: 35px;" class="layadmin-font-em">耗时：{{elapsed}}ms</p>
                    </div>
                    <div class="layui-card-body">
                        <div class="article-list-item ew-datagrid-item" v-for="(item,index) in blogsdata" v-bind:key="item.Id">
                            <h2 v-html="item.Title"></h2>
                            <div class="article-list-item-text layui-text" v-html="item.Contents">
                            </div>
                            <div class="article-list-item-desc layui-text">
                                <span class="newsinfo">
                                    <i class="layui-icon layui-icon-username"></i>
                                    发布作者: {{ item.Publisher }}
                                </span>
                                <span class="newsinfo">
                                    <i class="layui-icon layui-icon-link"></i>
                                    归属栏目: [{{ item.MetaTitle }}]
                                </span>
                                <span class="createtime">
                                    发布时间 {{formatTime(item.CreatedTime)}}
                                </span>
                            </div>
                            <div class="article-list-item-tool">
                                @foreach (var btn in moduleAssignedBtns)
                                {
                                    <span class="article-list-item-tool-item" v-on:click="ItemClick(@btn.Id, '@btn.EventName', item)">
                                        <i class="@btn.IconCssClass"></i>@btn.DisplayName
                                    </span>
                                }
                            </div>
                        </div>
                        <div class="layui-container" id="pageContainer" style="float:left;"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<input type="text" class="layui-hide" id="currentSystemModuleId" value="@currentSystemModuleId" />
<input type="text" class="layui-hide" id="columntreeType" value="@columntreeType" />
@await Component.InvokeAsync("RecordButton")
<!-- 公开度 -->
<script type="text/html" id="whocanseeTpl">
    {{#  if(d.WhoCanSee == 0){ }}
    <span style="color: #FFB800;">私密浏览</span>
    {{#  } else if(d.WhoCanSee == 1){ }}
    <span style="color: #FF5722;">管理员可见</span>
    {{#  } else if(d.WhoCanSee == 2){ }}
    <span style="color: #01AAED;">指定角色可见</span>
    {{#  } else { }}
    <span style="color: #2F4056;">公开浏览</span>
    {{#  } }}
</script>
<!-- 允许留言-->
<script type="text/html" id="allowcommentsTpl">
    <input type="checkbox" name="isallowComments" lay-filter="isallowComments" value="{{d.AllowComments}}" lay-skin="switch" lay-text="允许|不允许" {{ d.AllowComments ? 'checked' : '' }}>
</script>
<!-- 推荐置顶-->
<script type="text/html" id="recommendTpl">
    <i class="layui-icon layui-icon-praise" style="cursor: pointer; font-size: 22px; color:{{#  if(d.IsRecommend){ }}#1E9FFF{{#  } else { }}#2F4056{{#  } }};"></i>
</script>

@section scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.3/moment.min.js"></script>
    <script src="https://unpkg.com/ant-design-vue@1.5.6/dist/antd.min.js"></script>
    <script type="text/javascript">
        var bloglisttableconfig = null,
            _globalAllowComments = false;
        layui.use(['util'], function () {
            var util = layui.util;
            bloglisttableconfig = {
                elem: '#bloglisttable',
                url: '/api/backend/business/blogmanage/getbloglist?isauth=true',
                request: {
                    pageName: '@searchModel.nameof(p => p.Page)', //页码的参数名称，默认：page
                    limitName: '@searchModel.nameof(p => p.PageSize)' //每页数据量的参数名，默认：limit
                },
                limits: [@searchModel.AvailablePageSizes],
                limit:  @searchModel.PageSize,
                cols: [[
                    { type: "checkbox", width: 50, fixed: "left" },
                    { field: 'Id', hide: true, title: 'ID' },
                    { field: '@Model.nameof(p => p.Title)', title: '@(ReflectionExtensions.GetPropertyDisplayName<BlogItemModel>(m => m.Title))' },
                    { field: '@Model.nameof(p => p.Publisher)', title: '@(ReflectionExtensions.GetPropertyDisplayName<BlogItemModel>(m => m.Publisher))', width: 120 },
                    { field: '@Model.nameof(p => p.WhoCanSee)', title: '@(ReflectionExtensions.GetPropertyDisplayName<BlogItemModel>(m => m.WhoCanSee))', templet: '#whocanseeTpl', width: 130 },
                    { field: '@Model.nameof(p => p.IsRecommend)', title: '@(ReflectionExtensions.GetPropertyDisplayName<BlogItemModel>(m => m.IsRecommend))', templet: '#recommendTpl', event: 'setRecommend', align: "center", width: 100 },
                    { field: '@Model.nameof(p => p.AllowComments)', title: '@(ReflectionExtensions.GetPropertyDisplayName<BlogItemModel>(m => m.AllowComments))', templet: '#allowcommentsTpl', width: 120 },
                    { field: '@Model.nameof(p => p.CreatedOnTime)', title: '@(ReflectionExtensions.GetPropertyDisplayName<BlogItemModel>(m => m.CreatedOnTime))', width: 160, templet: function (d) { return util.toDateString(d.CreatedOnTime, "yyyy-MM-dd HH:mm:ss"); } },
                    { title: '操作', minWidth: 100, templet: '#tableitemBars', fixed: "right", align: "center" }
                ]],
                parseData: function (res) { //res 即为原始返回的数据
                    //DavidLee 2019/12/04 通过layui table源码发现：layui table在内部只使用了parseData预定义的几个参数名
                    //要通过其ajax方法回调 done方法，可以追加额外参数并在done中通过res[参数名]进行获取
                    return {
                        "code": res.state == 200 ? 0 : -1,     //解析接口状态
                        "msg": res.message,     //解析提示文本
                        "count": res.data.RecordsTotal, //解析数据长度
                        "data": res.data.Data,   //解析数据列表
                        "globalAllowComment": res.data.BlogSettingsModel.AllowNotRegisteredUsersToLeaveComments
                    };
                },
                page: true,
                done: function (res) {
                    _globalAllowComments = res.globalAllowComment;
                }
            };
        });
        //For ant design vue: menu
        //由于使用了BundleMinifier压缩插件，ES6部分语法不支持压缩编译，故不放入blogmanage.js进行压缩
        var SubMenu = {
            template: `
              <a-sub-menu :key="menuInfo.id" v-bind="$props" v-on="$listeners">
                <span slot="title">
                  <i class="layui-icon layui-icon-triangle-r"></i><span>{{ menuInfo.title }}<span class="layui-badge layui-bg-gray" style="margin-left: 5px;" v-if="menuInfo.children.length > 0">{{menuInfo.children.length}}</span></span>
                </span>
                <template v-for="item in menuInfo.children">
                  <a-menu-item v-if="item.children.length == 0" :key="item.id">
                    <span>{{ item.title }}</span>
                  </a-menu-item>
                  <sub-menu v-else :key="item.id" :menu-info="item" />
                </template>
              </a-sub-menu>
            `,
            name: 'SubMenu',
            // must add isSubMenu: true
            isSubMenu: true,
            props: {
                ...antd.Menu.SubMenu.props,
                // Cannot overlap with properties within Menu.SubMenu.props
                menuInfo: {
                    type: Object,
                    default: () => ({}),
                },
            },
            components: {
                'ASubMenu': antd.Menu.SubMenu,
                'AMenuItem': antd.Menu.Item,
                'AIcon': antd.Icon
            },
        };
    </script>
    <script src="~/js/backend/business/blogmanage.min.js" charset="utf-8" asp-append-version="true"></script>
}
